
import { useEffect } from "react";
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from "react-router-dom";
import { $Http } from "../../network";


import leftFrameImage from "../../assets/image/左框@2x.png"
import rightFrameImage from "../../assets/image/右框@2x.png"

// svg 
import { ReactComponent as UserSvg } from '../../assets/svg/通用／icon图标／line／user.svg';
import { ReactComponent as PasswordSvg } from '../../assets/svg/通用／icon图标／line／password.svg';
import { ReactComponent as EyeOpenSvg } from '../../assets/svg/icon_line_eye_open.svg';
import { ReactComponent as EyeCloseSvg } from '../../assets/svg/icon_line_eye_close.svg';
import lessModule from "./index.module.less"
import axios from "axios";

// 登录页面-表单组件
const LoginPageFormComponent: React.FC = () => {

    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate();
    // 登录数据 接口

    const initialValuesData = {
        username: "atn",
        password: "123456",
    }

    // 表单验证成功并登录
    const onFinish = (values: object) => {
        $Http("login", values, "post").then((res) => {
            sessionStorage.setItem("bearerToken", res["token"]); // 缓存token
            navigate('/home');     // 跳转到首页
        }).catch((err) => {
            messageApi.open({
                type: 'error',
                content: 'This is an error message',
            });
        })
        navigate('/home');
    };

    return (
        <>
            {contextHolder}
            <Form
                className={`${lessModule["main-main__form"]}`}
                initialValues={initialValuesData}
                onFinish={onFinish}
            >
                <Form.Item
                    className={`${lessModule["main-form__usernameItem"]}`}
                    name="username"
                    rules={[{ required: true, message: '请输入用户名！' }]}
                >
                    <Input prefix={<UserSvg width={24} height={24} />} placeholder="请输入用户名！" autoComplete="off" />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入密码！' }]}
                >
                    <Input.Password prefix={<PasswordSvg width={24} height={24} />} placeholder="请输入密码！" autoComplete="off" iconRender={(visible) => (visible ? <EyeOpenSvg width={20} height={20} /> : <EyeCloseSvg width={20} height={20} />)} />
                </Form.Item>
                <Form.Item >
                    <Button className={`${lessModule["main-form__submit"]}`} type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </>
    )
}

// 登录页面
const LoginPage: React.FC = () => {
    const getJson_freeway = () => {
        axios("./freeway.json").then((res) => {
            sessionStorage.setItem("homePage_freewayList", JSON.stringify(res.data))

        })
    }
    // 初始化
    useEffect(() => {
        getJson_freeway()

    }, [])
    useEffect(() => {
        // 清除缓存的token
        sessionStorage.removeItem("bearerToken")
        getJson_freeway()
    }, [])

    return (
        <div className={`${lessModule["loginPage"]}`}>
            <div className={`${lessModule["loginPage-content"]}`}>
                <img className={`${lessModule["loginPage-content__sidesImage"]}`} src={leftFrameImage} />
                <div className={`${lessModule["loginPage-content__center"]}`}>
                    <div className={`${lessModule["content-center__main"]}`}>
                        <div className={`${lessModule["center-main__header"]}`}>高速公路电力能耗与品质监测系统平台</div>
                        <div className={`${lessModule["center-main__main"]}`}>
                            <LoginPageFormComponent />
                        </div>
                    </div>
                    <div className={`${lessModule["content-center__footer"]}`}></div>
                </div>
                <img className={`${lessModule["loginPage-content__sidesImage"]}`} src={rightFrameImage} />
            </div>
            <div className={`${lessModule["loginPage-support"]}`}>V1.0技术支持： Copyright© 2022. 艾特能电气，All Rights Reserved.</div>
        </div>
    )
}

export default LoginPage